<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>3dPhoto</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        background: #eaeaea;
      }

      .box {
        width: 320px;
        height: 200px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        transform-style: preserve-3d;
        animation: im 20s linear infinite;
      }

      .box .img_bg {
        width: 100%;
        height: 100%;
        position: absolute;
      }

      @keyframes im {
        0% {
          transform: rotateY(0deg);
          /* transform: rotateY(0deg) rotateX(10deg); */
        }

        25% {
          transform: rotateY(90deg);
          /* transform: rotateY(90deg) rotateX(-10deg); */
        }

        50% {
          transform: rotateY(180deg);
          /* transform: rotateY(180deg) rotateX(10deg); */
        }

        75% {
          transform: rotateY(270deg);
          /* transform: rotateY(270deg) rotateX(-10deg); */
        }

        100% {
          transform: rotateY(360deg);
          /* transform: rotateY(360deg) rotateX(10deg); */
        }
      }

      /*10张图片3d变换*/
      .box .img_bg:nth-child(1) {
        transform: rotateY(0deg) translateZ(600px);

        backface-visibility: visible;
        background: linear-gradient(45deg, #ff0000, #ff6666, #ff0000);
      }

      .box .img_bg:nth-child(2) {
        transform: rotateY(36deg) translateZ(600px);
        backface-visibility: visible;
        background: linear-gradient(45deg, #ff7f00, #ffb366, #ff7f00);
      }

      .box .img_bg:nth-child(3) {
        transform: rotateY(72deg) translateZ(600px);
        backface-visibility: visible;
        background: linear-gradient(45deg, #ffff00, #ffff66, #ffff00);
      }

      .box .img_bg:nth-child(4) {
        transform: rotateY(108deg) translateZ(600px);
        backface-visibility: visible;
        background: linear-gradient(45deg, #00ff00, #66ff66, #00ff00);
      }

      .box .img_bg:nth-child(5) {
        transform: rotateY(144deg) translateZ(600px);
        backface-visibility: visible;
        background: linear-gradient(45deg, #00ffff, #66ffff, #00ffff);
      }

      .box .img_bg:nth-child(6) {
        transform: rotateY(180deg) translateZ(600px);
        backface-visibility: visible;
        background: linear-gradient(45deg, #0000ff, #6666ff, #0000ff);
      }

      .box .img_bg:nth-child(7) {
        transform: rotateY(216deg) translateZ(600px);
        backface-visibility: visible;
        background: linear-gradient(45deg, #8b00ff, #b366ff, #8b00ff);
      }

      .box .img_bg:nth-child(8) {
        transform: rotateY(252deg) translateZ(600px);
        backface-visibility: visible;
        background: linear-gradient(45deg, #ff00ff, #ff66ff, #ff00ff);
      }

      .box .img_bg:nth-child(9) {
        transform: rotateY(288deg) translateZ(600px);
        backface-visibility: visible;
        background: linear-gradient(45deg, #ffd700, #ffe866, #ffd700);
      }

      .box .img_bg:nth-child(10) {
        transform: rotateY(324deg) translateZ(600px);
        backface-visibility: visible;
        background: linear-gradient(45deg, #808080, #b3b3b3, #808080);
      }
    </style>
  </head>
  <body>
    <div class="show">
      <div class="box">
        <div class="img_bg"></div>
        <div class="img_bg"></div>
        <div class="img_bg"></div>
        <div class="img_bg"></div>
        <div class="img_bg"></div>
        <div class="img_bg"></div>
        <div class="img_bg"></div>
        <div class="img_bg"></div>
        <div class="img_bg"></div>
        <div class="img_bg"></div>
      </div>
    </div>
  </body>
</html>
